<template>
  <div class="page">
    <div class="search-input">
      <Input class="input" @on-keyup="keySearch" v-model="search" type="text" :placeholder="$t('header.productUrlPI')">
      </Input>
      <div class="search-btn" @click="onSearch">
        <img class="search-icon" src="@/assets/images/home/search-icon.png" alt="">搜索
      </div>
    </div>
    <div class="top">
      <div class="menu-wrap" @mouseleave="clearSelectedItem">
        <ul class="menu">
          <li class="menu-item" v-for="item in menuList" :class="menuActive == item.key ? 'menu-active' : ''"
            @mouseover="updateSelectedItem(item)" :key="item.key">
            <div class="left">
              <img class="icon" :src="item.icon" alt="">
              <span class="text">{{ item.title }}</span>
            </div>
          </li>
        </ul>
        <div class="menu-pop">
          <template v-for="(childItem, index) in childDataInfo">
            <menu-list v-if="childItem.children && childItem.children.length > 0" :menu-child="childItem"
              :key="index"></menu-list>
          </template>
        </div>
      </div>
      <div class="carousel-wrap">
        <Carousel :autoplay-speed="10000" :arrow="hotBannerList.length > 1 ? 'hover' : 'never'" class="carousel" loop
          :autoplay="hotBannerList.length > 1 ? true : false">
          <CarouselItem v-for="item in hotBannerList" :key="item.id">
            <div class="carousel-item">
              <a :href="item.jump" target="_blank">
                <img class="image" :src="item.image" :alt="item.title">
              </a>
            </div>
          </CarouselItem>

        </Carousel>
      </div>
    </div>
    <div class="content">
      <home-title :title="$t('hot.hotGoods')" hint="BUY & SHIP"></home-title>
      <!--搜索分类列表-->
      <div class="type-list-wrap" v-if="hotCategoryList.length > 0">
        <div class="type-list">
          <span class="type-item" @click="onSearchType('')">{{ $t('hot.hotGoods') }}</span>
          <span class="type-item" :class="active == item.title ? 'type-active' : ''" v-for="item in hotCategoryList"
            @click="onSearchType(item)" :key="item.key">{{ item.title }}</span>
        </div>
        <!--       <span class="type-more">更多</span>-->
      </div>
      <div class="product-list">
        <product v-for="item in hotList" :currencySymbol="userCurrency.code" :key="item.id" :info="item"></product>
      </div>
      <div class="more" v-if="!noMore">
        <Button class="btn" :loading="loading" @click="getHotFocusProductList">
          {{ $t('home.seeMore') }}
        </Button>
      </div>
    </div>
  </div>
</template>

<script>
import { hotSaleProductList } from "@/api/product";
import HomeTitle from "@/views/main/home/components/home-title";
import Product from "@/views/main/home/components/product";
import MenuList from "./commponents/menu-list";
import { mapState } from "vuex";
import { category1688List } from "@/api/base";
export default {
  name: "index",
  components: { Product, HomeTitle, MenuList },
  data() {
    return {
      menuActive: '', // 活跃的菜单
      active: '',
      form: {
        keyword: '',
        pageNo: 1,
        pageSize: 20
      },
      childDataInfo: [],
      loading: false,
      noMore: false,
      search: '',
      hotList: [], // 热门商品
    }
  },
  computed: {
    ...mapState({
      userCurrency: state => state.user.userCurrency,
      hotCategoryList: (state) => {
        // 搜索热门商品选择
        let list = [];
        if (state.config.config) {
          list = state.config.config.hotCategoryList;
        }
        return list;
      },
      menuList: (state) => {
        // 所有分类列表
        let list = [];
        if (state.config.config) {
          list = state.config.config.categoryList;
        }
        return list;
      },
      hotBannerList: (state) => {
        // 热门分类列表
        let list = [];
        if (state.config.config) {
          list = state.config.config.hotBannerList;
        }
        return list;
      }
    })
  },
  created() {
    this.getHotFocusProductList();
    this.getCategory1688List();
  },
  methods: {
    clearSelectedItem() {
      this.menuActive = '';
    },
    updateSelectedItem(info) {
      this.menuActive = info.key;
      this.childDataInfo = info.children;
    },
    getCategory1688List() {
      category1688List().then((res) => {
        // console.log(res);
      })
    },
    onSearchType(info) {
      if (info) {
        if (info.keyword) {
          this.form.keyword = info.keyword;
        } else {
          this.form.keyword = info.title;
        }
        this.active = info.title;
      } else {
        this.active = '';
        this.form.keyword = '';
      }


      this.noMore = false;
      this.form.pageNo = 1;
      this.hotList = [];
      this.getHotFocusProductList();
    },
    keySearch(typeKey) {
      if (typeKey.code == 'Enter') {
        this.onSearch();
      }
    },
    getHotFocusProductList() {
      if (this.noMore) {
        return false;
      }
      if (this.loading) {
        return false;
      }
      this.loading = true;
      // 热销商品列表
      hotSaleProductList(this.form).then((res) => {
        let data = res.result.records;
        for (let i = 0; i < data.length; i++) {
          this.hotList.push(data[i]);
        }
        this.loading = false;
        this.form.pageNo = this.form.pageNo + 1;
        if (this.form.pageNo > res.result.pages) {
          this.noMore = true;
        }
      }).catch(() => {
        this.loading = false;
      })
    },
    onSearch() {
      // 搜索商品
      if (!this.search) {
        this.$Message.error(this.$t('home.searchKeywords'));
        return false;
      }
      this.$router.push(`/goods?text=${this.search}`);
    },
  }
}
</script>

<style scoped lang="less">
.page {
  .search-input {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    width: 896px;
    height: 56px;
    border-radius: 90px;
    margin: 0 auto;
    margin-top: 40px;
    border: 1px solid #999999;

    .input {
      flex: 1;
      background: rgba(0, 0, 0, 0);
      border: 0;
      padding: 0 24px;
      height: 40px;
      font-size: 18px;

      &:hover {
        border: 0;
      }

      &:focus {
        border: 0;
      }

      :deep(.ivu-input) {
        border: 0;
        height: 100%;
        font-size: 16px;

        &::placeholder {
          color: @t-text-color;
          font-weight: 400;
          font-size: 16px;
        }
      }

      outline: none;
    }

    .search-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      width: 102px;
      height: 56px;
      background: #FF186B;
      border-radius: 90px;
      cursor: pointer;
      color: #FFFFFF;
      font-size: 20px;
      font-weight: 400;

      .search-icon {
        display: block;
        width: 24px;
      }
    }
  }

  .top {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    margin: 0 auto;
    margin-top: 32px;

    .menu-wrap {
      position: relative;

      .menu {
        box-sizing: border-box;
        position: relative;
        width: 240px;
        border: 1px solid #ECECEC;
        height: 360px;
        overflow-y: auto;

        &::-webkit-scrollbar {
          width: 4px;
          height: 6px;
        }

        &::-webkit-scrollbar-thumb {
          background: #f1f1f1;
          border-radius: 4px;
        }

        &::-webkit-scrollbar-track {
          background: transparent;
        }

        &::-webkit-scrollbar-corner {
          background: #ffffff;
        }

        .menu-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 24px;
          cursor: pointer;
          color: @t-title-color;

          .icon {
            display: block;
            width: 22px;
            margin-right: 6px;
          }

          .left {
            display: flex;
            align-items: center;
          }

          .text {
            font-size: 14px;
          }

          .more {
            color: @t-title-color;
            font-size: 14px;
          }
        }

        .menu-active {
          background: @t-border-color;
          color: @primary-color;
        }
      }

      &:hover {
        .menu-pop {
          display: block;
        }
      }

      .menu-pop {
        display: none;
        position: absolute;
        top: -1px;
        bottom: -1px;
        max-height: 480px;
        padding: 24px;
        margin-right: -963px;
        right: 0px;
        width: 962px;
        z-index: 99;
        background: #FFFFFF;
        overflow-y: auto;
        box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
        .scrollbarStyle();
      }
    }

    .carousel-wrap {
      width: 936px;
      height: 360px;
      overflow: hidden;
      margin-left: 24px;

      .carousel {
        &-item {
          a {
            .image {
              display: block;
              width: 100%;
            }
          }
        }
      }
    }
  }

  .content {
    width: 1200px;
    margin: 0 auto;

    .product-list {
      display: grid;
      width: 100%;
      grid-template-columns: repeat(5, 1fr);
      gap: 48px 16px;
    }

    .type-list-wrap {
      display: flex;
      justify-content: space-between;
      margin-bottom: 16px;
      padding: 12px 0;
      border-bottom: 1px solid @t-border-color;

      .type-list {
        display: flex;
        align-items: center;

        .type-item {
          margin-right: 48px;
          cursor: pointer;
          font-size: 14px;

          &:hover {
            color: @primary-color;
          }
        }

        .type-active {
          color: @primary-color;
          font-weight: 500;
        }
      }

      .type-more {
        cursor: pointer;
        font-size: 14px;

        &:hover {
          color: @primary-color;
        }
      }
    }

    .more {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin: 32px 0;

      .btn {
        width: 30%;
      }
    }

    .loading-wrap {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      z-index: 999;
      display: flex;
      align-items: center;
      justify-content: center;

      .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
      }

      @keyframes ani-demo-spin {
        from {
          transform: rotate(0deg);
        }

        50% {
          transform: rotate(180deg);
        }

        to {
          transform: rotate(360deg);
        }
      }

      .demo-spin-col {
        height: 100px;
        position: relative;
        border: 1px solid #eee;
      }
    }
  }
}
</style>